.recommend_banner {
    position: relative;
    top:3rem;
    display: flex;
    width: 100vw;
    height:calc(23vw + 3rem);
    min-height: 6rem;
    overflow: hidden;
    margin-bottom: 3rem;
}

.carousel {
    display: flex;
    height:23vw ;
    transition: transform 0.5s ease-in-out;
}

.carousel input {
    display: none;
}

.slide {
    display: flex;
    min-width: 100%;
    height: 28vw;
    background-size: auto calc(100vw * 185/630);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.navigation {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    width: 3rem;
    z-index: 2;
}

.dots {
    width: .5rem;
    height: .5rem;
    background: #bbb;
    border-radius: 50%;
    cursor: pointer;
}

#i1:checked ~ .slide:nth-of-type(1),
#i2:checked ~ .slide:nth-of-type(2),
#i3:checked ~ .slide:nth-of-type(3) {
    transform: scale(1);z-index: 2;
}

#i1:checked ~ .navigation #dot1,
#i2:checked ~ .navigation #dot2,
#i3:checked ~ .navigation #dot3 {
    background: #d10707;
}


.recommend_list{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.recommend_list a{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.product_grid{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: .5rem auto;
}
.product_grid img{
    width:15%;
    width: 3rem;
    height: 3rem;
    border-radius: 10%;
    margin: .5rem auto;
}
.grid_txt{
    width:80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.grid_item_text{
    font-size: 1rem;
    text-align: center;

}
.grid_item_desc{
    font-size: .8rem;
    text-align: center;
}
.banner_item{
    width: 100vw;
    height: 28vw;
    margin: 0 auto;       
    display: flex;
    justify-content:center;
    align-items: center;
    background-color:var(--precolor-fou);
    }
.barley{background: url("../../banner/banner_ins_barley.jpg") no-repeat center;background-size: cover; }
.superMarie{background: url("../../banner/banner_ins_superMarie.jpg") no-repeat center;background-size: cover;}
.imp5{background: url("../../banner/banner_ins_imp5.jpg") no-repeat center;background-size: cover;}
.payixiang{background: url("../../banner/banner_ins_payixiang.jpg") no-repeat center;background-size: cover;}
.filialpiety_precancer{background: url("../../banner/banner_ins_filialpiety_precancer.jpg") no-repeat center;background-size: cover;}
.iwithoutworry{background: url("../../banner/banner_ins_iwithoutworry.jpg") no-repeat center;background-size: cover;}
.urchin5-6{background: url("../../banner/banner_ins_urchin5-6.jpg") no-repeat center;background-size: cover;}
.enjoyeveryyear{background: url("../../banner/banner_ins_enjoyeveryyear.jpg") no-repeat center;background-size: cover;}


.bigarm{background: url("../../banner/banner_ins_bigarm.jpg") no-repeat center;background-size: cover;}
.starfamily{background: url("../../banner/banner_ins_starfamily.jpg") no-repeat center;background-size: cover;}
.bluehealth{background: url("../../banner/banner_ins_bluehealth.jpg") no-repeat center;background-size: cover;}